<template>
	<view class="container">
		<u-sticky>
			<view class="ptb_14 plr_16 bc_fff">
				<uni-search-bar @confirm="getData()" placeholder="输入收货人或联系电话搜索" radius="20" v-model="params.searchName"
					:cancelButton="false" @clear="handleClear">
				</uni-search-bar>
			</view>
		</u-sticky>
		<view class="ptb_12 plr_16 bc_fff mt_8" v-for="item,index in dataList" :key="index">
			<view>
				<text>收货人：</text><text class="fx_1">{{item.realName||''}} {{item.phone||''}}</text>
			</view>
			<view class="mt_8 fx">
				<text>收货地址：</text><text
					class="fx_1">{{`${item.province}${item.city}${item.district}${item.detail||''}`}}</text>
			</view>
			<view class="fx aic jcb mt_24">
				<u-checkbox-group :value="isDefault(item)" shape="circle" @change="handleChangeDefault(item)">
					<u-checkbox label="默认地址" activeColor="#F08519" name="1"></u-checkbox>
				</u-checkbox-group>
				<!-- <label class="fx aic">
					<radio style="transform: scale(0.7);" color="#FE5A1C" value="" /><text>默认地址</text>
				</label> -->
				<view class="fx jce">
					<button class="custom_btn default lh_28 width_80 br_18 fz_14"
						@click="handleDelete(item,index)">删除</button>
					<button class="custom_btn default lh_28 width_80 br_18 fz_14 ml_16"
						@click="handleUpdate(item)">编辑</button>
				</view>
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 pt_8 pbsafe_8 plr_16 bc_fff">
			<button class="custom_btn primary w100 lh_40 br_56 fz_14 fb" @click="handleAdd">添加新地址</button>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	export default {
		data() {
			return {
				loading: false,
				dataList: [],
				params: {
					searchName: ''
				},
			};
		},
		onShow() {
			this.getData()
		},
		computed: {
			isDefault() {
				return (item) => {
					return item.isDefault ? ['1'] : []
				}
			}
		},
		methods: {
			getData() {
				this.$utils.loading()
				api.get('/user/api/UserAddress/list', {
					...this.params ? this.params : {}
				}).then(res => {
					this.dataList = res.data;
				})
			},
			deleteData(id, index) {
				this.$utils.loading()
				api.delete('/user/api/UserAddress/' + id).then(res => {
					this.$utils.showToast('删除成功')
					this.dataList.splice(index, 1)
				})
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/person/pages/address_add'
				})
			},
			handleClear() {
				const params = {
					...this.params
				}
				params.searchName = ''
				this.params = params
				this.getData()
			},
			handleDelete(item, index) {
				uni.showModal({
					content: '确认删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.deleteData(item.id, index)
						}
					}
				})

			},
			handleUpdate(item) {
				uni.navigateTo({
					url: '/pages/person/pages/address_add?id=' + item.id
				})
			},
			handleChangeDefault(item) {
				this.$utils.loading()
				api.put('/user/api/UserAddress', {
					id: item.id,
					isDefault: item.isDefault == 0 ? 1 : 0,
				}).then(res => {
					this.$utils.showToast('修改成功')
					this.getData()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-searchbar {
		padding: 0;
	}

	/deep/.uni-searchbar__box {
		justify-content: flex-start;
	}

	.container {
		padding-bottom: 118rpx;
	}
</style>